<html>
  <head>
    <title>hello react</title>
    <style>
      .title {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript" src="../../js/react.production.min.js"></script>
    <script type="text/javascript" src="../../js/react-dom.production.min.js"></script>
    <script type="text/javascript" src="../../js/babel.min.js"></script>
    <script type="text/babel">
      const domId = "test001";
      const domText = "hello react";
      const vDOM = (
        <div>
          <h2 className="title" id={domId}>
            <span style={{ color: 'white', fontSize: '30px' }}>{domText}</span>
          </h2>
          <input type="text" />
          <helloworld>hello world1</helloworld>
          <Helloworld>hello world2</Helloworld>
        </div>
      );
      ReactDOM.render(vDOM, document.getElementById('root'));
      /**
       * jsx语法规则
       *  1. 定义虚拟DOM时，不需要用引号
       *  2. 标签中混入JS表达式时要用{}
       *  3. 样式的类名指定要用className
       *  4. 内联样式要用 style={{key:value}}的形式
       *  5. 只能有一个根标签
       *  6. 标签必须闭合
       *  7. 标签首字母大小写区别
       *    7.1 首字母小写：默认转成html同名标签，如果没有同名标签，则警告
       *    7.2 首字母大写：渲染组件，如果组件没有定义，则报错
       */
    </script>
  </body>
</html>
